<template>
  <el-dialog :visible="loginPopBool" class="pop-login" close="doClose" close-on-press-escape close-on-click-modal>

    <el-tabs v-model="activeName" class="tab-switch" stretch @tab-click="handleClick">
      <el-tab-pane label="登录" name="first" class="loginBox" style="color:'#999'">
        <div class="input-box phone-box">
          <i class="iconfont iconlogin_icon_phone" />
          <input v-model="phone" type="phone" placeholder="请输入手机号">
        </div>
        <div class="input-box mima-box">
          <i class="iconfont iconlogin_icon_password" />
          <input v-model="mima" type="password" placeholder="请输入密码">
        </div>
        <p class="wangjimima" @click="wjmm">忘记密码？</p>
        <button class="denglu" @click="login">登录</button>
      </el-tab-pane>

      <el-tab-pane label="注册" name="second" class="registerBox">
        <div class="input-box phone-box">
          <input v-model="phone" type="phone" placeholder="请输入手机号" length="11">
        </div>
        <div class="input-box phone-box">
          <input v-model="mima" type="phone" placeholder="请输入密码" max="8">
        </div>
        <div class="input-box mima-box">
          <input v-model="yanzhengma" type="password" placeholder="请输入验证码" max="6">
          <span>获取验证码</span>
        </div>
        <div class="xieyi" @click="iAgree">
          <i v-if="agreeBool" class="iconfont iconlogin_icon_dui" />
          <b v-else class="circle" />
          <span>我已同意并接受<router-link to="/login">《用户协议》</router-link>&nbsp;<router-link to="">《隐私政策》</router-link></span>
        </div>
        <button class="denglu zhuce" @click="register">立即注册</button>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      header1Obj: {
        logoImg: require('../../../assets/img/common/logo0.png'),
        style: {
          backgroundColor: '#323333',
          color: '#fff'
        }
      },
      footerObj: {
        logoImg: require('../../../assets/img/common/logo2.png'),
        css: {
          // bgUrl: require('../assets/img/footer/footer-bg.png')
        },
        mostColor: '#999',
        titColor: '#666'
      },
      activeName: 'first',
      agreeBool: false,
      input3: '',
      input4: '',
      phone: '',
      mima: '',
      yanzhengma: ''
    }
  },
  computed: {
    loginPopBool() {
      return this.$store.state.template1.loginPopBool
    }
  },
  created() {
    if (this.$route.query.isLogin) {
      this.activeName = this.$route.query.isLogin
    }
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    login() {
      this.$store.commit('template1/loginPopBool', false)
      // this.$router.push('/vMain')
    },
    register() {
      this.$store.commit('template1/loginPopBool', false)
      // this.$router.push('/vMain')
    },
    wjmm() {
      this.$store.commit('template1/loginPopBool', false)
      this.$router.push('/fgetPassword')
    },
    iAgree() {
      this.agreeBool = !this.agreeBool
    },
    doClose() {
      console.log('aaaa')
    }
  }

}
</script>

<style lang="scss" scoped>

  .pop-login{
    .tab-switch{
      width: 100%;
      color: #999;
      /* 登录注册公共部分 */
      .input-box{
        width: 100%;
        height: 81px;
        line-height: 62px;
        border-bottom: 1px solid #ccc;
        padding-top: 27px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        font-size: 16px;
        >input{
          border: none;
          outline: none;
          background-color: transparent;
          height: 20px;
          line-height: 20px;
          padding: 0;
          width: 100%;
          font-size: 16px;
          color: #333;
        }
        >input::-webkit-input-placeholder{
          /* 修改placeholder颜色  */
          color: #999;
          font-size: 16px;
        }
        >i{
          font-size: 23px;
          margin-right: 13px;
        }
      }

      .denglu{
        border: none;
        outline: none;
        width: 450px;
        height: 44px;
        background-color: #d1d1d1;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
      }
      .zhuce{
        margin-bottom: 17px;
      }
      /* 登录 */
      .loginBox{
        >p:last-child{
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #417AEF;
        }
        >.wangjimima{
          width: 100%;
          text-align: right;
          margin-bottom: 25px;
          cursor: pointer;
          font-size: 16px;
        }
        >.mima-box{
          margin-bottom: 15px;
        }

      }

      /* 注册 */
      .registerBox{
        padding-top: 6px;
        >.input-box{
          height: 60px;
          line-height: 62px;
          padding-top: 17px;
        }
        >p:last-child{
          width: 100%;
          text-align: center;
          font-size: 16px;
          >a{
            color: #417AEF;
          }
        }
        >.mima-box{
          position: relative;
          margin-bottom: 20px;
          >span{
            display: block;
            height: 30px;
            line-height: 30px;
            position: absolute;
            top: 24px;
            right: 0;
            color: #417AEF;
            cursor: pointer;
            font-size: 14px;
          }
        }
        .xieyi{
          margin-bottom: 40px;
          padding-left: 3px;
          color: #999;
          cursor: pointer;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          >i{
             margin-right: 3px;
             font-size: 18px;
             color: #D9D9D9;
          }
          >span{
            vertical-align: middle;
            font-size: 14px;
            >a{
              color: #417AEF;
            }
          }
          >.circle{
            display: inline-block;
            box-sizing: border-box;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #999;
            margin-right: 3px;
          }
        }
      }
    }
  }
</style>
